<template>
	<view class="zone">
		<Header title="装备"></Header>
		<image class="knapsack" src="http://image.qxgm.site/tdz/img/equipment/mg-15.png" mode="widthFix"
			@click="$p.navto('/pages/index/knapsack')"></image>
		<view class="main">
			<view class="zongzhanli">
				<view class="all">
					<text>总战力:{{kit_fight+faqi_fight}}</text>
				</view>
				<view class="fenbie">
					<view class="biebox1">
						装备战力:{{kit_fight}}
					</view>
					<view class="biebox1">
						法器战力:{{faqi_fight}}
					</view>
				</view>
			</view>
			<view class="renbox">

				<image v-if="renimg!=0" class="ren" :src="`http://image.qxgm.site/tdz/img/home/${renimg}.gif`"
					mode="widthFix"></image>

				<view class="renleft">
					<view :class="['part','part'+item.site]" v-for="(item,index) in kit_list" :key="index"
						@click="openEquipfun(index)">
						<view class="houlainame" v-if="item.fight<=0">
							{{index==0?'武器':index==1?'衣服':index==2?'裤子':index==3?'帽子':index==4?'腰带':index==5?'鞋子':''}}
						</view>
						<view :class="[item.fight <= 0 ? '' : 'quality'+item.quality]">
							<image class="eq1"
								:src="item.fight<=0?'http://image.qxgm.site/tdz/img/equipment/mg-17.png':item.kit_img"
								mode="widthFix"></image>
							<text v-if="item.fight>0" class="eq2">战:{{item.fight}}</text>
							<text v-if="item.fight>0"
								:class="item.site==1||item.site==3||item.site==5?'eq3':'eq33'">{{item.grade_name}}</text>
						</view>
						<view class="ename">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="tishi">
				点击装备或法器可以替换
			</view>
			<view class="btns">
				<view class="btn1" @click="go">
					获取装备
				</view>
				<view class="btn2" @click="openlist">
					合成法器
				</view>
			</view>
			<view class="gbox">
				<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
				<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
				<view class="box">
					<view class="fazhanli">
						法器<text class="zl">(战力:{{faqi_fight}})</text>
					</view>
					<view class="faqi" v-for="(item,index) in faqi_list" :key="index" @click="openfaqifun(index)">
						<view :class="[item.fight <= 0?'fpart':'quality'+item.quality,guanbi == false ? 'guanbi' : '']">
							<image class="fq1"
								:src="item.fight<=0?'http://image.qxgm.site/tdz/img/equipment/mg-17.png':item.faqi_img"
								mode="widthFix"></image>
							<text v-if='item.fight > 0' class="fq2">战:{{item.fight}}</text>
							<text v-if='item.fight > 0' class="fq3">{{item.grade_name}}</text>
						</view>
						<!-- <image v-if="item.status==0" class="suo" src="http://image.qxgm.site/tdz/img/equipment/mg-12.png" mode="widthFix"></image> -->

						<view class="fname">
							{{item.site_name }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的装备 -->
		<u-mask :show="openEquip" :zoom='false'>
			<view :class="['warp3',openEquip==true?'showHandler':'hideHandler'] ">
				<image class="yun_mask" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
				<view class="mask_content3">
					<view class="m_info3">
						<view class="title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
							<text>我的装备</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
						</view>
						<scroll-view scroll-y="true" class="gundong">
							<view class="caolist">
								<view class="link" v-for="(item,index) in mykit" :key="index">
									<view :class="['quality'+item.quality]">
										<image class="cq1" :src="item.kit_img" mode="widthFix"></image>
										<text class="cq2">战:{{item.fight}}</text>
										<text class="cq3">{{item.grade_name}}</text>
									</view>
									</image>
									<view class="cname">
										{{item.kit_name}}
									</view>
									<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
										:class="['zhuang',item.is_on == 0 ?'':'filet']"
										@click="zhuangbei(item)">{{item.is_on == 0 ? '装备' : '卸下'}}</u-button>
								</view>
								<view class="empty" v-if="mykit.length==0">
									<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
									暂无数据
								</view>
							</view>
						</scroll-view>

					</view>
				</view>
				<image class="m_close3" @click="openEquip = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
			</view>
		</u-mask>
		<!-- 我的法器 -->
		<u-mask :show="openfaqi" :zoom='false'>
			<view :class="['warp3',openfaqi==true?'showHandler':'hideHandler'] ">
				<image class="yun_mask" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
				<view class="mask_content3">
					<view class="m_info3">
						<view class="title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
							<text>我的法器</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
						</view>
						<view class="caolist">
							<view class="link" v-for="(item,index) in myfaqi" :key="index">
								<view :class="['quality'+item.quality]">
									<image class="cq1" :src="item.kit_img" mode="widthFix"></image>
									<text class="cq2">战:{{item.fight}}</text>
									<text class="cq3">{{item.grade_name}}</text>
								</view>
								</image>
								<view class="cname">
									{{item.kit_name}}
								</view>
								<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
									:class="['zhuang',item.is_on == 0 ?'':'filet']"
									@click="zhuangbeifq(item)">{{item.is_on == 0 ? '装备' : '卸下'}}</u-button>
							</view>
							<view class="empty" v-if="myfaqi.length==0">
								<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
								暂无数据
							</view>
						</view>
					</view>
				</view>
				<image class="m_close3" @click="openfaqi = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
			</view>
		</u-mask>
		<!-- 法器合成big -->
		<u-mask :show="faqihechen" :zoom='false'>
			<view :class="['warp3',faqihechen==true?'showHandler':'hideHandler']">
				<image class="yun_mask" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"
					style="top: -6%;"></image>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
				<view class="mask_content4">
					<view class="m_title">
						<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
						<text>法器合成</text>
						<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
					</view>
					<scroll-view scroll-y class="info">
						<block v-for="(item,index) in faqilist" :key="index">
							<view class="item">
								<view class="faboxj">
									<view style="display: flex;">
										<image class="tanimg" :src="item.img" mode="widthFix"></image>
										<view class="tanright">
											<view class="tanname">
												{{item.name}}
											</view>
											<view class="tanli">
												战力:{{item.fight}}
											</view>
										</view>
									</view>

									<view class="msg">
										<view class="p1">{{item.grade_name}}</view>
										<view class="p2" @click="hechen(item)">合成</view>
									</view>
								</view>
								<image class="tantite" src="http://image.qxgm.site/tdz/img/liandan/mg-13.png"
									mode="widthFix"></image>
								<view class="xuyao">
									需要材料
								</view>
								<view class="tanboxnb">
									<view class="tanpart" v-for="(item1,index) in item.props" :key="index">
										<image class="tanpan" :src="item1.img" mode="widthFix"></image>
										<view class="tanshuliang">
											<text
												class="huang">{{Math.floor(item1.num)}}</text>/{{Math.floor(item1.need_num)}}
										</view>
									</view>
								</view>
							</view>
						</block>
						<view class="empty" v-if="faqilist.length==0">
							<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
							暂无数据
						</view>


					</scroll-view>
				</view>
				<image class="m_close3" @click="faqihechen = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" style="top: -3%;" />
			</view>
		</u-mask>
		<!-- 法器合成 -->
		<u-mask :show="refine">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>法器合成</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop2">
							<view class="faboxj">
								<image class="tanimg" :src="item.img" mode="widthFix"></image>
								<view class="tanright">
									<view class="tanname">
										{{item.name}}
									</view>
									<view class="tanli">
										战力:{{item.fight}}
									</view>
								</view>
							</view>
							<image class="tantite" src="http://image.qxgm.site/tdz/img/liandan/mg-13.png"
								mode="widthFix"></image>
							<view class="xuyao">
								需要材料
							</view>
							<view class="tanboxnb">
								<view class="tanpart" v-for="(item1,index) in item.props" :key="index">
									<image class="tanpan" :src="item1.img" mode="widthFix"></image>
									<view class="tanshuliang">
										<text
											class="huang">{{Math.floor(item1.num)}}</text>/{{Math.floor(item1.need_num)}}
									</view>
								</view>
							</view>
							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
								class="refineCon" @click="synthesis">合成</u-button>
							<view class="dangqian">
								合成费用:{{item.lingshi}}
								<image class="lingshi" src="http://image.qxgm.site/tdz/img/yaoyuan/mg-13.png"
									mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<image class="m_close" @click="refine = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				kit_list: [], //身上装备
				faqi_list: [], //身上法器
				mykit: [], //背包装备
				myfaqi: [], //背包法器
				openEquip: false, //装备背包开关
				openfaqi: false, //法器背包开关
				faqihechen: false, //法器合成1
				faqilist: [],
				refine: false, //法器合成2
				item: {},
				faqi_fight: '',
				kit_fight: '',
				site: '', //装备
				site2: '', //法器
				renimg: 0, //人物ID
				userinfo: uni.getStorageSync('userinfo'),
                guanbi:''
			}
		},
		onLoad() {
			this.zbindex() //人物装备
			this.getUserInfo()
		},
		methods: {
			openEquipfun(index) {
				index == 0 ? this.site = 1 : index == 1 ? this.site = 2 : index == 2 ? this.site = 3 : index == 3 ? this
					.site = 4 : index == 4 ? this.site = 5 : index == 5 ? this.site = 6 : this.site = 0
				this.kit(this.site) //装备背包   

			},
			openfaqifun(index) {
				index == 0 ? this.site2 = 11 : index == 1 ? this.site2 = 12 : index == 2 ? this.site2 = 13 : index == 3 ?
					this.site2 = 14 : this.site2 = 0
                //console.log(this.userinfo.level)
                if(this.userinfo.level < 21){
                    this.$u.toast('需要炼虚期解锁')
                    
                }else{
                    this.faqi(this.site2) //法器背包
                }    
			},

			// 获取个人信息
			getUserInfo() {

				if (this.userinfo.level >= 1 && this.userinfo.level <= 4) {
					this.renimg = 1
				} else if (this.userinfo.level >= 5 && this.userinfo.level <= 8) {
					this.renimg = 2
				} else if (this.userinfo.level >= 9 && this.userinfo.level <= 12) {
					this.renimg = 3
				} else if (this.userinfo.level >= 13 && this.userinfo.level <= 16) {
					this.renimg = 4
				} else if (this.userinfo.level >= 17 && this.userinfo.level <= 20) {
					this.renimg = 5
				} else if (this.userinfo.level >= 21 && this.userinfo.level <= 24) {
					this.renimg = 6
				} else if (this.userinfo.level >= 25 && this.userinfo.level <= 28) {
					this.renimg = 7
				} else if (this.userinfo.level >= 29 && this.userinfo.level <= 32) {
					this.renimg = 8
				} else if (this.userinfo.level >= 33 && this.userinfo.level <= 36) {
					this.renimg = 9
				} else if (this.userinfo.level >= 37 && this.userinfo.level <= 40) {
					this.renimg = 10
				} else if (this.userinfo.level >= 41 && this.userinfo.level <= 44) {
					this.renimg = 11
				} else if (this.userinfo.level >= 45 && this.userinfo.level <= 48) {
					this.renimg = 12
				}
                
                if(this.userinfo.level < 21){
                    this.guanbi = false
                }else{
                    this.guanbi = true
                }
                
			},

			//穿上脱下装备
			async zhuangbei(item) {
				let res = await this.$http.index.kiton({
					backpack_kit_id: item.id
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.zbindex() //人物装备
					this.kit(this.site) //背包装备
				}
			},
			//穿上脱下法器
			async zhuangbeifq(item) {
				let res = await this.$http.index.faqion({
					backpack_faqi_id: item.id
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.zbindex() //人物装备
					this.faqi(this.site2) //背包装备
				}
			},
			//打开法器合成列表
			async openlist() {
				let res = await this.$http.index.composelist()
				if (res.code == 1) {
					this.faqilist = res.data
					this.faqihechen = true
				}
			},
			//打开合成框
			hechen(item) {
				this.item = item
				this.refine = true
			},
			//合成
			async synthesis() {
				let res = await this.$http.index.compose({
					faqi_id: this.item.id
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.refine = false
					this.faqihechen = false
					// this.faqi(this.site2) //法器背包
				}
			},
			//人物装备
			async zbindex() {
				let res = await this.$http.index.zbindex()
				if (res.code == 1) {
					this.kit_list = res.data.kit_list
					this.faqi_list = res.data.faqi_list
					this.faqi_fight = res.data.faqi_fight
					this.kit_fight = res.data.kit_fight
				}
			},
			//背包装备
			async kit(site) {
				let res = await this.$http.index.kit({
					site: site
				})
				if (res.code == 1) {
					this.mykit = res.data
					this.openEquip = true
				}
			},
			//法器背包
			async faqi(site) {
				let res = await this.$http.index.faqi({
					site: site
				})
				if (res.code == 1) {
					this.myfaqi = res.data
					this.openfaqi = true
				}
			},
			go() {
				uni.navigateTo({
					url: '/pages/index/zlrealm?id=' + 3 + '&name=' + '广寒域'
				})
			}
		}
	}
</script>

<style lang="less">
	.zone {
		position: relative;
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/equipment/mg-01.png) no-repeat;
		background-size: 100% auto;
	}

	// #ifdef H5
	.knapsack {
		position: absolute;
		top: 14px;
		right: 8px;
		width: 50px;
		z-index: 999;
	}

	// #endif

	// #ifdef APP-PLUS
	.knapsack {
		position: absolute;
		top: 34px;
		right: 8px;
		width: 50px;
		z-index: 999;
	}

	// #endif


	.zongzhanli {
		background: url(http://image.qxgm.site/tdz/img/equipment/mg-16.png) no-repeat;
		background-size: 100% 100%;
		padding: 30px 0 10px;
		margin-top: -15px;

		.all {
			text-align: center;

			text {
				font-size: 20px;
				font-weight: normal;
				color: #ecd8b5;
				line-height: 20px;
			}
		}

		.fenbie {
			padding: 0 12%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			font-weight: normal;
			color: #ffffe0;
			line-height: 18px;
			margin-top: 14px;
		}
	}


	.gbox {
		position: relative;
		width: 100%;
		margin-top: 3vh;
	}

	.ping1 {
		width: 100%;
		display: flex;
	}

	.yun {
		position: absolute;
		top: -25px;
		left: 0;
		width: 44%;
		z-index: 9;
	}

	.quality1 {
		position: relative;
		background: url(http://image.qxgm.site/tdz/img/quality/1.png) no-repeat;
		background-size: 100% 100%;
	}

	.quality2 {
		position: relative;
		background: url(http://image.qxgm.site/tdz/img/quality/2.png) no-repeat;
		background-size: 100% 100%;
	}

	.quality3 {
		position: relative;
		background: url(http://image.qxgm.site/tdz/img/quality/3.png) no-repeat;
		background-size: 100% 100%;
	}

	.quality4 {
		position: relative;
		background: url(http://image.qxgm.site/tdz/img/quality/4.png) no-repeat;
		background-size: 100% 100%;
	}

	.quality5 {
		position: relative;
		background: url(http://image.qxgm.site/tdz/img/quality/5.png) no-repeat;
		background-size: 100% 100%;
	}

	.quality6 {
		position: relative;
		background: url(http://image.qxgm.site/tdz/img/quality/6.png) no-repeat;
		background-size: 100% 100%;
	}

	.box {
		position: relative;
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 29px 23px 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.fazhanli {
			position: absolute;
			top: -32px;
			right: 0;
			width: 176px;
			text-align: center;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-14.png) no-repeat;
			background-size: 100% 100%;
			font-size: 18px;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 18px;
			padding: 8px 0;

			.zl {
				color: #FFDE43;
				font-size: 15px;
			}
		}

		.fpart {
			// position: relative;
			// background: url(http://image.qxgm.site/tdz/img/equipment/mg-03.png) no-repeat;
			// background-size: 100% 100%;
		}

		.faqi {
			position: relative;
			width: 22%;
		}

		.suo {
			width: 42px;
			position: absolute;
			top: -10px;
			right: -10px;
		}

		.filter {
			filter: grayscale(100%);
		}

		.fq1 {
			width: 100%;
		}

		.fq2 {
			width: 100%;
			text-align: center;
			position: absolute;
			bottom: 0px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 12px;
			font-weight: normal;
			color: #FFFEFE;
			line-height: 20px;
			text-shadow: 0 1px 1px #000;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-18.png) no-repeat;
			background-size: 100% 100%;
		}

		.fq3 {
			width: 42px;
			height: 20px;
			position: absolute;
			text-align: center;
			top: -5px;
			left: -7px;
			font-size: 12px;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 20px;
			zoom: 0.92;
			text-shadow: 0 1px 1px #653333;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-10.png) no-repeat;
			background-size: 100% 100%;
		}

		.fq33 {
			width: 42px;
			height: 20px;
			text-align: center;
			position: absolute;
			top: -5px;
			right: -7px;
			font-size: 12px;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 20px;
			zoom: 0.92;
			text-shadow: 0 1px 1px #653333;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-11.png) no-repeat;
			background-size: 100% 100%;
		}

		.fname {
			font-size: 13px;
			font-weight: normal;
			color: #333333;
			line-height: 13px;
			margin-top: 4px;
			text-align: center;
		}
	}

	.renbox {
		position: relative;
		margin-top: 2vh;
		text-align: center;

		.ren {
			position: relative;
			width: 80%;
			transform: translateX(0%);
			display: block;
			margin: 0 auto;
			z-index: 99;
		}

		.texiaogif {
			position: absolute;
			width: 64%;
			bottom: -14%;
			left: 50%;
			transform: translateX(-50%);
		}

		.part {
			width: 70px;
			position: absolute;
			text-align: center;
			z-index: 999;
		}

		.houlainame {
			position: absolute;
			top: 2px;
			left: 2px;
			z-index: 1000;
			font-size: 12px;
			color: #fff;
		}

		.part1 {
			top: 20px;
			left: 7px;
		}

		.part2 {
			top: 20px;
			right: 7px;
		}

		.part3 {
			top: 120px;
			left: 7px;
		}

		.part4 {
			top: 120px;
			right: 7px;
		}

		.part5 {
			top: 220px;
			left: 7px;
		}

		.part6 {
			top: 220px;
			right: 7px;
		}


		.spart {
			position: relative;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-03.png) no-repeat;
			background-size: 100% 100%;
		}

		.spart2 {
			position: relative;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-04.png) no-repeat;
			background-size: 100% 100%;
		}

		.eq2 {
			position: absolute;
			bottom: 0px;
			right: 4px;
			font-size: 12px;
			font-weight: normal;
			color: #FFFEFE;
			line-height: 20px;
			text-shadow: 0 1px 1px #000;
		}

		.eq3 {
			width: 42px;
			height: 20px;
			position: absolute;
			top: -5px;
			left: -7px;
			font-size: 12px;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 20px;
			zoom: 0.92;
			text-align: center;
			text-shadow: 0 1px 1px #653333;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-10.png) no-repeat;
			background-size: 100% 100%;
		}

		.eq33 {
			width: 42px;
			height: 20px;
			position: absolute;
			top: -5px;
			right: -7px;
			font-size: 12px;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 20px;
			zoom: 0.92;
			text-align: center;
			text-shadow: 0 1px 1px #653333;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-11.png) no-repeat;
			background-size: 100% 100%;
		}

		.eq1 {
			width: 100%;
		}

		.ename {
			font-size: 13px;
			font-weight: normal;
			color: #FFFEFE;
			line-height: 13px;
			text-shadow: 0 1px 1px #000000;
			margin-top: 4px;
		}
	}

	.tishi {
		position: relative;
		z-index: 99;
		display: block;
		margin: 4px auto 0;
		width: calc(100% - 14px);
		text-align: center;
		font-size: 14px;
		font-weight: normal;
		color: #FFFEFE;
		line-height: 14px;
		background: url(http://image.qxgm.site/tdz/img/equipment/mg-02.png) no-repeat;
		background-size: 100% 100%;
		padding: 9px 0;
	}

	.btns {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 2vh;

		.btn1 {
			width: 113px;
			height: 37px;
			text-align: center;
			line-height: 37px;
			font-size: 18px;
			font-weight: normal;
			color: #b0eff1;
			text-shadow: 0 1px 1px #000065;
			background: url(http://image.qxgm.site/tdz/img/youchai/mg-03.png) no-repeat;
			background-size: 100% 100%;
			margin-right: 18px;
		}

		.btn2 {
			width: 113px;
			height: 37px;
			text-align: center;
			line-height: 37px;
			font-size: 18px;
			font-weight: normal;
			color: #fbf1a7;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/youchai/mg-04.png) no-repeat;
			background-size: 100% 100%;
		}
	}


	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-05.png) no-repeat;
		background-size: 100% 100%;
		padding: 5px 0 6px;

		image {
			width: 18%;
		}

		text {
			font-size: 20px;
			font-weight: normal;
			color: #50463E;
			line-height: 20px;
			margin: 0 13px;
		}
	}

	.warp3 {
		width: 100%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.showHandler {
		animation: showHandler 0.8s forwards ease;
	}

	.hideHandler {
		animation: hideHandler 0.8s forwards ease;
	}

	@keyframes showHandler {
		0% {
			bottom: -50%;
		}

		100% {
			bottom: 0%;
		}
	}

	@keyframes hideHandler {
		0% {
			bottom: 0%;
		}

		100% {
			bottom: -50%;
		}
	}

	.m_close3 {
		position: absolute;
		top: -5%;
		right: 8px;
		width: 32px;
	}

	.m_info3 {
		display: block;
		margin: 0 auto;
		width: 100%;
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		min-height: 280px;
	}

	.mask_content3 {
		.m_info3 {
			padding: 0% 6px 10px;
			box-sizing: border-box;
		}

	}

	.yun_mask {
		position: absolute;
		left: 0;
		top: -8%;
		width: 43%;
		z-index: 9;
	}

	.gundong {
		height: 300px;
		background: url(http://image.qxgm.site/tdz/img/daolv/mg-02.png) no-repeat;
		background-size: 100% 100%;
	}

	.caolist {
		display: flex;
		flex-wrap: wrap;
		padding: 10px 7px;

		.link {
			position: relative;
			width: 20%;
			margin-bottom: 10px;
		}

		.cpart {
			position: relative;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-03.png) no-repeat;
			background-size: 100% 100%;
		}

		.cq1 {
			width: 100%;
		}

		.cq2 {
			width: 94%;
			text-align: center;
			position: absolute;
			bottom: 4px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 12px;
			font-weight: normal;
			color: #FFFEFE;
			line-height: 20px;
			text-shadow: 0 1px 1px #000;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-18.png) no-repeat;
			background-size: 100% 100%;
		}

		.cq3 {
			width: 42px;
			height: 20px;
			position: absolute;
			text-align: center;
			top: -5px;
			left: -7px;
			font-size: 12px;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 20px;
			zoom: 0.92;
			text-shadow: 0 1px 1px #653333;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-10.png) no-repeat;
			background-size: 100% 100%;
		}


		.cname {
			font-size: 12px;
			font-weight: normal;
			color: #FFFEFE;
			line-height: 12px;
			margin-top: 4px;
			text-align: center;
		}

		.filet {
			filter: grayscale(100%);
		}

		.zhuang {
			margin: 5px auto 0;
			width: 90%;
			text-align: center;
			font-size: 12px !important;
			font-weight: normal;
			color: #FFFFFF;
			text-shadow: 0 1px 1px #CB6500;
			height: 25px !important;
			line-height: 25px;
			background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.jihuop2 {
		padding: 0 8%;

		.faboxj {
			display: flex;
			align-items: center;
		}

		.tanimg {
			width: 70px;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-03.png) no-repeat;
			background-size: 100% 100%;
		}

		.tanname {
			font-size: 18px;
			font-weight: normal;
			color: #333333;
			line-height: 18px;
			margin-bottom: 20px;
		}

		.tantite {
			width: 100%;
			margin: 10px 0;
		}

		.xuyao {
			font-size: 15px;
			font-weight: normal;
			color: #333333;
			line-height: 15px;
			margin-bottom: 7px;
		}

		.tanli {
			font-size: 15px;
			font-weight: normal;
			color: #FF3333;
			line-height: 15px;
		}

		.tanboxnb {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: url(http://image.qxgm.site/tdz/img/daolv/mg-01.png) no-repeat;
			background-size: 100% 100%;
			padding: 8px 7px;
		}

		.tanright {
			margin-left: 10px;
		}

		.tanpart {
			position: relative;
			width: 22%;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-03.png) no-repeat;
			background-size: 100% 100%;
		}

		.tanshuliang {
			position: absolute;
			bottom: 5px;
			right: 5px;
			display: flex;
			align-items: center;
			font-size: 15px;
			font-weight: normal;
			color: #fff;
			line-height: 15px;
			text-shadow: 0 1px 1px #000;
		}

		.huang {
			color: #FFFF00;
		}

		.tanpan {
			width: 100%;
		}

		.lingshi {
			width: 25px;
		}

		.refineCon {
			display: block;
			margin: 14px auto 0;
			width: 116px;
			height: 37px;
			text-align: center;
			line-height: 37px;
			font-size: 18px;
			font-weight: normal;
			color: #fbf1a7;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/youchai/mg-04.png) no-repeat;
			background-size: 100% 100%;
		}

		.dangqian {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.red {
			color: #FF3300;
		}
	}

	.mask_content4 {
		background: #d3cbc6;

		.item {
			background: #e2ddd9;
			border-radius: 10px;
			padding: 10px;
			box-sizing: border-box;
			margin-bottom: 10px;
		}

		.info {
			padding: 10px;
			height: 500px;
			box-sizing: border-box;

			.faboxj {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.tanimg {
				width: 70px;
				background: url(http://image.qxgm.site/tdz/img/equipment/mg-03.png) no-repeat;
				background-size: 100% 100%;
			}

			.tanname {
				font-size: 14px;
				font-weight: normal;
				color: #333333;
				margin-bottom: 10px;
			}

			.tantite {
				width: 100%;
				margin: 10px 0;
			}

			.xuyao {
				font-size: 15px;
				font-weight: normal;
				color: #333333;
				line-height: 15px;
				margin-bottom: 7px;
			}

			.tanli {
				font-size: 14px;
				font-weight: normal;
				color: #FF3333;
				line-height: 15px;
			}

			.tanboxnb {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: url(http://image.qxgm.site/tdz/img/daolv/mg-01.png) no-repeat;
				background-size: 100% 100%;
				padding: 8px 7px;
			}

			.tanright {
				margin-left: 10px;
				width: 60%;
			}

			.msg {
				font-size: 12px;

				.p2 {
					margin-top: 20px;
					width: 60px;
					height: 33px;
					font-size: 14px;
					font-weight: normal;
					line-height: 33px;
					color: #fdf2c5;
					text-align: center;
					text-shadow: 0 1px 1px #CB6500;
					background: url(http://image.qxgm.site/tdz/img/public/btn7.png) no-repeat;
					background-size: 100% 100%;
					float: right;
				}
			}

			.tanpart {
				position: relative;
				width: 22%;
				background: url(http://image.qxgm.site/tdz/img/equipment/mg-03.png) no-repeat;
				background-size: 100% 100%;
			}

			.tanshuliang {
				position: absolute;
				bottom: 5px;
				right: 5px;
				display: flex;
				align-items: center;
				font-size: 15px;
				font-weight: normal;
				color: #fff;
				line-height: 15px;
				text-shadow: 0 1px 1px #000;
			}

			.huang {
				color: #FFFF00;
			}

			.tanpan {
				width: 100%;
			}

			.lingshi {
				width: 25px;
			}

			.refineCon {
				display: block;
				margin: 14px auto 0;
				width: 116px;
				height: 37px;
				text-align: center;
				line-height: 37px;
				font-size: 18px;
				font-weight: normal;
				color: #fbf1a7;
				text-shadow: 0 1px 1px #CB6500;
				background: url(http://image.qxgm.site/tdz/img/youchai/mg-04.png) no-repeat;
				background-size: 100% 100%;
			}

			.dangqian {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.red {
				color: #FF3300;
			}
		}
	}
    
    .guanbi{
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
</style>